<template>
	<view class="categoryContainer">
		<view class="categoryItem" v-for="(categoryItem,index) in categoryModule" :key="index">
			<image class="categoryImage" :src="categoryItem.titlePicUrl"></image>
			<scroll-view class="scrollView" scroll-x="true">
				<view class="scrollItem" v-for="item in categoryItem.itemList" :key="item.id">
					<image :src="item.primaryPicUrl"></image>
					<text>{{item.name}}</text>
				</view>
				<view class="scrollItem more">查看更多</view>				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	//引入vuex的辅助函数
	import { mapGetters } from 'vuex'		
	export default {	
			name:'category',
			computed: {
				//分类信息数据
				...mapGetters(['categoryModule'])
			}
		
	}
</script>

<style lang="stylus">
.categoryContainer
	.categoryItem
		.categoryImage
			width 100%
			height 370upx
		.scrollView
			display flex
			width 100%
			white-space nowrap
			.scrollItem
				width 200upx
				display inline-block
				margin-left 20upx
				vertical-align top
				&.more
					background-color #eee
					line-height 200upx
					text-align center
					margin-right 20upx
				image
					width 200upx
					height 200upx
					background-color #eee;
				text
						width 100%
						font-size 24upx
						display -webkit-box
						overflow hidden
						white-space pre-wrap
						-webkit-box-orient vertical
						-webkit-line-clamp 2
						
</style>